<template>
  <div class="details">
    <div class="return" @click="back">
      <span>Go back</span>
      <img src="@/assets/images/return_you.png" alt />
    </div>
    <h1>{{staff_info.name}}Office</h1>
    <div class="description">
      <div class="img">
        <img :src="staff_info.image" alt />
      </div>

      <div class="text" v-html="staff_info.synopsis"></div>
    </div>
    <div class="message">
      <!-- <div class="message_box">
        <h5>Leave word</h5>
        <div class="input_box">
          <div class="input_box_left">
            <input type="text" v-model="name" placeholder="Please enter your name" />
            <input type="text" v-model="email" placeholder="Please enter email address" />
            <input type="text" v-model="tel" placeholder="Please enter the telephone number" />
          </div>
          <div class="input_box_right">
            <textarea placeholder="leave word" v-model="content"></textarea>
            <div class="message_submit" @click="onLeaveWordSubmit">Submit</div>
          </div>
        </div>
      </div> -->
      <div class="info_message">
        <h5>Contact</h5>
        <div class="info_message_box">
          <!-- <img class="info_tu" :src="staff_info.image_input" alt /> -->
          <div class="info-item-box">
            <div v-if="staff_info.administrative" class="info-item">
              <img src="@/assets/images/contactUs_info_01.png" alt />
              <span class="name">{{staff_info.administrative}}</span>
            </div>
            <div class="info-item">
              <img src="@/assets/images/contactUs_info_02.png" alt />
              <span class="text">Phone：{{staff_info.tel}}</span>
            </div>
            <div class="info-item">
              <img src="@/assets/images/contactUs_04.png" alt />
              <span class="text">Email：{{staff_info.mailbox}}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="news">
      <h1>{{staff_info.name}} News</h1>
      <div class="news_box" v-for="(item , index) in news_list" :key="index">
        <router-link :to="{name:'en_contactUs_news_detail',query:{id:item.id,regionId:regionId}}" class="new_item">
          <!-- <img :src="item.image_input" alt /> -->
          <div class="imgBox" :style="{backgroundImage:'url('+ item.image_input + ')'}"></div>
          <div class="desc_box">
            <div class="new_title">{{item.title}}</div>
            <div class="new_text">{{item.synopsis}}</div>
            <div class="new_time">{{item.date_time}}</div>
          </div>
        </router-link>
      </div>
      <el-pagination
        :page-size="10"
        :total="count"
        background
        layout="prev, pager, next"
        @current-change="pageSize"
      ></el-pagination>
    </div>
  </div>
</template>
<script>
import { service_cate } from "@/api/field.js";
import { leaveWord } from "@/api/home.js";
import { office_visit, oarticle_list } from "@/api/contactUs.js";
export default {
  data() {
    return {
      count: 100,
      name: "",
      tel: "",
      email: "",
      content: "",
      info: { image: "" },
      news_list: [],
      staff_info: {},
      service_cid_list: [],
       regionId:'',
    };
  },
  created() {
    //获取业务领域分类
    service_cate().then((res) => {
      this.service_cate = res.data.data.EN;
    });
  },
  mounted() {
    let that = this;
     this.regionId = this.$route.query.id
    office_visit({ id: this.regionId }).then((res) => {
      // console.log(res);
      // this.info = res.data.data;

      // that.service_cid_list = new Array();
      // let service_arr = (' '+res.data.staff.service_cid).split(",");
      // service_arr.map((i) => {
      //   let currentObj = that.service_cate.find(j => j.id == i);
      //   if (currentObj){that.service_cid_list.push(currentObj);}
      // });
       if (this.$isMobile()) {
        res.data.data.synopsis = this.$pxToRem(res.data.data.synopsis);
      }
      this.staff_info = res.data.data;
    });
    this.getNews(this.$route.query.id);
  },
  methods: {
    back() {
      this.$router.go(-1); //返回上一层
    },
    pageSize(page) {
      this.getNews(this.$route.query.id, page);
      // this.getNews_list_(page, 10, this.news_cate[0].id);
    },
    getNews(id, page) {
      oarticle_list({ cid: id, page: page }).then((res) => {
        // res.data.data.map((item) => {
        //   item.time = this.formatDate(item.add_time);
        // });
        this.news_list = res.data.data;
        this.count = res.data.count;
      });
    },
    //提交留言
    onLeaveWordSubmit() {
      let myregMobile = /^1([38]\d|5[0-35-9]|7[3678])\d{8}$/,
        myregEmail = /\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/;
      if (!myregMobile.test(this.tel)) {
        return this.$message("Demand import Authentic issue");
      }
      if (!myregEmail.test(this.email)) {
        return this.$message("Demand import Authentic mailbox");
      }
      if (!this.content) {
        return this.$message("Demand import");
      }

      leaveWord({
        name: this.name,
        tel: this.tel,
        content: this.content,
        email: this.email,
        office_id: this.staff_info.id,
      }).then((res) => {
        this.name = null;
        this.tel = null;
        this.content = null;
        this.email = null;
        return this.$message({
          message: "Impressive treasure",
          type: "success",
        });
      });
    },
    /**
     *
     * 转时间轴封装
     */
    formatDate(nows) {
      let that = this;
      var add0 = function (m) {
        return m < 10 ? "0" + m : m;
      };
      var now = new Date(nows * 1000);
      var year = now.getFullYear();
      var month = now.getMonth() + 1;
      var date = now.getDate();
      var hour = now.getHours();
      var minute = now.getMinutes();
      var second = now.getSeconds();
      return year + "-" + add0(month) + "-" + add0(date);
    },
  },
};
</script>
<style scoped src="./sass/contactUs.css"></style>